<template>
  <div class="project-detail-wrap">
    <!-- 子节点点击 -->
    <div class="project-detail" v-if="projectId">
      <div class="project-detail-head">
        <div class="project-detail-title">
          <span>{{ projectInfo.projectName }}</span>
        </div>
        <div class="project-detail-ation">
          <InputSearch
            class="project-search"
            v-model="dataProjectItem.searchValue"
            placeholder="输入任务名称进行搜索"
            :prefix-icon="Search"
            @handleQuery="handleQuery"></InputSearch>
          <el-tooltip content="消息" placement="bottom">
            <el-button>
              <SvgIcon name="message-fill" color="var(--elp-color-primary)"></SvgIcon>
            </el-button>
          </el-tooltip>
          <el-tooltip content="人员" placement="bottom">
            <el-button>
              <SvgIcon name="project-person-fill" color="var(--elp-color-primary)"></SvgIcon>
            </el-button>
          </el-tooltip>
          <el-tooltip content="项目配置" placement="bottom">
            <el-button @click="settingClick">
              <SvgIcon name="project-setting-fill" color="var(--elp-color-primary)"></SvgIcon>
            </el-button>
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="返回项目列表" placement="bottom">
            <el-button plain @click="toProject">
              <SvgIcon name="back"></SvgIcon>
            </el-button>
          </el-tooltip>
        </div>
      </div>
      <div class="project-detail-content">
        <div class="project-detail-tools">
          <div class="info-screen">
            <span class="task-total">共{{ total }}项</span>
            <el-select v-model="selectUserLabel" @change="userChange" style="width: 185px">
              <template #prefix>
                <SvgIcon name="user"></SvgIcon>
              </template>
              <el-option
                v-for="(item, index) in typeOption"
                :key="index"
                :label="item.label"
                :value="item.value"></el-option>
            </el-select>
            <el-select v-model="queryInfo.currentStatus" @change="statusChange" style="width: 185px">
              <template #prefix>
                <SvgIcon name="project-status"></SvgIcon>
              </template>
              <el-option
                v-for="(item, index) in statusOption"
                :key="index"
                :label="item.label"
                :value="item.value"></el-option>
            </el-select>
            <el-select v-model="queryInfo.delayFlag" @change="delayChange" style="width: 185px">
              <template #prefix>
                <SvgIcon name="project-status"></SvgIcon>
              </template>
              <el-option
                v-for="(item, index) in delayOption"
                :key="index"
                :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </div>
          <div class="view-type" :class="{ 'view-type-table': viewType === 'table' }">
            <div class="view-type-item project-add" @click="openTaskGroupDialog">
              <SvgIcon size="18px" name="project-add" style="margin-right: 10px"></SvgIcon>
              新增项目阶段
            </div>
            <el-radio-group v-model="tabVal" class="tab-radio-group" @change="tabChangRadio">
              <el-radio-button label="任务优先" value="1" border />
              <el-radio-button label="流程优先" value="2" border />
            </el-radio-group>
            <div class="view-type-item" @click="layoutChange(0)">
              <el-tooltip content="卡片" placement="top">
                <SvgIcon name="menu-project"></SvgIcon>
              </el-tooltip>
            </div>
            <div class="view-type-item" @click="layoutChange(1)">
              <el-tooltip content="列表" placement="top">
                <SvgIcon name="menu-list"></SvgIcon>
              </el-tooltip>
            </div>
          </div>
        </div>
        <ItemLayoutOne
          v-if="layoutIndex === 0"
          :taskList="groupList"
          @updateTaskGroup="openTaskGroupDialog"
          @refresh="refreshProcess"></ItemLayoutOne>
        <ItemLayoutTwo v-if="layoutIndex === 1" :taskList="groupList"></ItemLayoutTwo>
        <HandleTaskGroup ref="taskGroupDialogRef" @refresh="getTaskItemListData"></HandleTaskGroup>
        <ProjectSetting
          v-model="settingVisible"
          :projectId="projectId"
          :projectFolderId="projectFolderId"
          @refresh="refreshProcess"></ProjectSetting>
      </div>
    </div>
    <!-- 父节点点击 展示列表内容 -->
    <div class="project-detail" v-if="treeParentNodeId">
      <div class="project-detail-head">
        <div class="project-detail-title">
          <span>{{ projectListData.projectName }}项目集</span>
        </div>
      </div>
      <div class="project-detail-content">
        <ItemProjectList :listData="parentGroupList"></ItemProjectList>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { getTcTaskItemList } from '@/assets/api/task'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import useUser from '@/store/user'
import { onMounted } from 'vue'

provide('getTaskItemListData', getTaskItemListData)

const emit = defineEmits(['refresh', 'toProject'])

defineExpose({
  settingClick,
  resetQueryInfo,
})

const router = useRouter()
const tabVal = ref('2')
const parentGroupList = ref([])

//选项卡切换
const tabChangRadio = (val) => {
  let arr = []
  if (tabVal.value === '1') {
    arr = groupListCopy.value.filter((item) => item.taskList.length > 0)
  } else {
    arr = groupListCopy.value
  }
  groupList.value = [...arr]
}

const props = defineProps({
  projectInfo: {
    type: Object,
    default: () => ({}),
  },
  projectListData: {
    type: Object,
    default: () => ({}),
  },
})
const viewType = ref('')
const projectId = computed(() => {
  return props.projectInfo.projectId || null
})

const treeParentNodeId = computed(() => {
  return props.projectListData.treeParentNode || null
})

const projectFolderId = computed(() => {
  return props.projectInfo.projectFolderId || null
})

// watch(projectId, (newVal) => {
//   if (newVal) {
//     console.log('newValnewValnewVal', newVal)
//     resetQueryInfo()
//     getTaskItemListData()
//   }
// })
// watch(treeParentNodeId, (newVal) => {
//   if (newVal) {
//     // console.log('treeParentNode=newVal', newVal)
//   }
// })
const typeOption = [
  {
    label: '全部',
    value: '',
  },
  {
    label: '我协助的',
    value: '我协助的',
  },
  {
    label: '我负责的',
    value: '我负责的',
  },
]
const statusOption = [
  {
    label: '全部',
    value: '',
  },
  {
    label: '未开始',
    value: '1',
  },
  {
    label: '处理中',
    value: '2',
  },
  {
    label: '完成',
    value: '4',
  },
]
const delayOption = [
  {
    label: '超期',
    value: '1',
  },
  {
    label: '未超期',
    value: '2',
  },
]
const dataProjectItem = reactive({
  searchValue: '',
  itemParams: {
    allNum: 0,
  },
  searchSelectOne: '',
  searchSelectTwo: '',
  layoutIndex: 0,
})

const queryInfo = ref({
  currentStatus: '',
  delayFlag: '',
})

const userStore = useUser()
const userForm = ref({})
const selectUserLabel = ref('')
function userChange(val) {
  switch (val) {
    case '':
      userForm.value = {}
      break
    case '我协助的':
      userForm.value = {
        taskAssistid: userStore.userInfo.userId,
      }
      break
    case '我负责的':
      userForm.value = {
        taskUserId: userStore.userInfo.userId,
      }
      break
  }
  // getTaskItemListData({ ...userForm.value, ...queryInfo.value })
  getTaskItemListData()
}
function statusChange(val) {
  // getTaskItemListData({ ...userForm.value, ...queryInfo.value })
  getTaskItemListData()
}
function delayChange(val) {
  // getTaskItemListData({ ...userForm.value, ...queryInfo.value })
  getTaskItemListData()
}

function resetQueryInfo() {
  queryInfo.value = { currentStatus: '', delayFlag: '' }
  selectUserLabel.value = ''
  userForm.value = {}
}

const layoutIndex = ref(0)

function layoutChange(index) {
  if (index === 1) {
    viewType.value = 'table'
  } else {
    viewType.value = ''
  }
  layoutIndex.value = index
  getTaskItemListData()
}

function handleQuery() {
  userForm.value = { ...userForm.value, ...{ taskTitle: dataProjectItem.searchValue } }
  getTaskItemListData()
}

const taskGroupDialogRef = ref()

// 刷新数据
function refreshProcess() {
  getTaskItemListData()
  // emit('refresh')
}

// 编辑任务分组
function openTaskGroupDialog(data = {}) {
  taskGroupDialogRef.value.open(data.itemId, projectId.value)
}

const groupDataSource = ref([])

// 阶段列表
const groupList = ref([])
const groupListCopy = ref([])

const total = ref(0)

function getTaskItemListData() {
  let searchForm = { ...userForm.value, ...queryInfo.value }
  const form = {
    tcTaskItems: {
      projectId: projectId.value,
    },
    tcTaskInfo: {
      projectId: projectId.value,
      ...searchForm,
    },
  }
  getTcTaskItemList(form).then((res) => {
    if (res.code === 200) {
      groupDataSource.value = res.rows
      groupList.value = groupDataSource.value.reduce((result, i) => {
        if (i.itemsChildren.length) {
          result.push(
            ...i.itemsChildren.map((j) => {
              // 拼接父级阶段名称
              j.itemName = `${i.itemName}/${j.itemName}`
              j.taskList = j.children
              j.taskListLength = j.children.length
              return j
            })
          )
        } else {
          i.taskList = i.children
          i.taskListLength = i.children.length
          result.push(i)
        }
        return result
      }, [])
      groupListCopy.value = [...groupList.value]
      total.value = groupList.value.reduce((result, item) => {
        result += item.infoCount
        return result
      }, 0)
    } else {
      ElMessage.error(res.msg)
    }
  })
}

// 项目配置页面
const settingVisible = ref(false)
function settingClick() {
  settingVisible.value = true
}

function toProject() {
  emit('toProject')
}

onMounted(() => {
  resetQueryInfo()
  getTaskItemListData()
})
</script>

<style scoped lang="scss">
.project-detail-wrap {
  height: 100%;
  @include use-flex(normal, normal, column);
}

.project-detail {
  height: 100%;
  @include use-flex(normal, normal, column);
  .project-detail-head {
    @include use-flex(center, space-between);
    padding: 12px 23px;
    border-bottom: var(--elp-border);
    &-add {
      margin-left: 36px;
    }
    .project-detail-ation {
      .elp-input {
        margin-right: 12px;
      }
      .elp-button {
        padding: 8px;
      }
    }
    .project-detail-title {
      display: flex;
      align-items: center;
      font-size: 20px;
      font-weight: bold;
      span {
        margin-right: 10px;
      }
    }
    .elp-input {
      width: 300px;
    }
  }
  .project-detail-content {
    padding: 20px 15px;
    height: calc(100% - 100px);
    .view-type {
      @include use-flex(center, center);
      margin-left: 10px;
      &::before {
        position: absolute;
        display: inline-block;
        content: '';
        height: 26px;
        width: 26px;
        border-radius: 5px;
        //border: 1px solid var(--elp-color-primary);
        transition: transform 0.3s;
        transform: translateX(134px);
      }
      &.view-type-table::before {
        transform: translateX(169px);
      }
      .project-add {
        border: var(--elp-border);
        border-radius: 8px;
        margin-right: 10px;
        &:hover {
          background-color: var(--elp-fill-color);
        }
      }
      .view-type-item {
        position: relative;
        cursor: pointer;
        padding: 5px;
        @include use-flex(center, center);
        &:nth-child(2)::after {
          display: inline-block;
          content: '';
          width: 1px;
          height: 12px;
          margin-left: 10px;
          background-color: var(--elp-border-color);
        }
      }
    }
    .tab-radio-group {
      margin-right: 10px;
    }
  }
  .project-detail-tools {
    @include use-flex(center, space-between);
    padding-bottom: 20px;
    .info-screen {
      display: flex;
      align-items: center;
      flex: 1;
      .task-total {
        font-size: 16px;
        color: var(--elp-text-color-secondary);
        margin-right: 40px;
      }
      .elp-select + .elp-select,
      .elp-select + .elp-button {
        margin-left: 24px;
      }
    }
    .view-type {
      @include use-flex(center);
      .elp-icon + .elp-icon {
        margin-left: 10px;
      }
    }
  }
}
.project-detail-parent {
  height: 100%;
  border-bottom: 1px solid var(--elp-border-color);
  &:last-child {
    border-bottom: 0;
  }
  .project-detail-content {
    height: calc(100% - 36px);
  }
}
</style>
